import {defineComponent, h, ref} from 'vue'
import Style from '@/styles/map.module.css'
import { ElDescriptions, ElDescriptionsItem, ElButton, ElTag, ElDivider } from 'element-plus'
import { followSave, useDeviceInfoApi } from "@/api/gps/device";
import { deviceStatus, deviceStatusType, switchPositionType, deviceStatusIcon, speedConvert, mileageConversion } from '@/utils/gps/format'
import close from '@/assets/close.png'
import not_follow from "@/assets/gps/not_follow.png"
import follow from "@/assets/gps/follow.png"
import { cloneDeep } from 'lodash'
import {gpsbus} from "@/utils/gps/event";
import {createPopup} from "@/utils/gps/createPopup";
import CdlMap from "@/components/map";

export default defineComponent({
  name: 'MapPopup',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  emits: ['close', 'jumpPage', 'command', 'warning', 'jumpWaybill'],
  setup(prop, { emit }) {
    // const deviceInfo = ref<any>()
    // useDeviceInfoApi(prop.deviceId).then(res =>{
    //   console.log(res.data);
    //   deviceInfo.value = res.data
    // })

    function closeWindow() {
      emit('close')
    }
    //点击详情
    function openDetail() {
      emit('jumpWaybill')
    }
    function jumpTrack() {
      gpsbus.emit('switchMenu', 'track')
      setTimeout(() => {
        gpsbus.emit('trackListInit', prop.device.imei)
      }, 100)
    }
    function jumpRecordPage() {
      gpsbus.emit('switchMenu', 'playback')
      setTimeout(() => {
        gpsbus.emit('playbackInit', prop.device.imei)
      }, 100)
    }
    function openCommand() {
      emit('command')
    }
    const trackingRef = ref()
    function openTracking() {
      createPopup(
        {
          default: () =>
            h(CdlMap, {
              ref: trackingRef,
              realTimeLocation: true
            })
        },
        {
          width: 400,
          height: 450,
          mask: false,
          drag: true
        }
      )
      trackingRef.value.initData(prop.device.imei)
    }
    function openWarning() {
      emit('warning')
    }

    /**
     * 关注功能
     */
    function followClick() {
      followSave(prop.device?.imei).then((res) => {
        prop.device.favor = !prop.device.favor
      })
    }
    return () => (
      <div class={Style.map_popup}>
        <div class={Style.suspended_window}>
          <div class={Style.head}>
            <div class={Style.title_name}>
              <img src={deviceStatusIcon(prop.device?.connectionStatus)} alt=""></img>
              <span>{prop.device?.plateNo}</span>
            </div>
            <ElTag size="small" type={deviceStatusType(prop.device?.connectionStatus)}>
              {deviceStatus(prop.device?.connectionStatus)}
            </ElTag>
            <div>
              <img
                src={prop.device.favor ? follow : not_follow}
                alt=""
                onClick={followClick}
                class={Style.follow}></img>
              <img src={close} alt="" onClick={closeWindow}></img>
            </div>
          </div>
          <div class={Style.mileage}>
            <div class={Style.item}>
              <p>当前速度</p>
              <p>{speedConvert(prop.device?.speed)}</p>
            </div>
            <div class={Style.item}>
              <p>当日里程</p>
              <p>{mileageConversion(prop.device?.todayDistance)}</p>
            </div>
            <div class={Style.item}>
              <p>总里程</p>
              <p>{mileageConversion(prop.device?.totalDistance)}</p>
            </div>
          </div>
          <ul class={Style.info}>
            <li>
              <span>设备序号：</span>
              {prop.device?.imei}
            </li>
            <li>
              <span>定位类型：</span> {switchPositionType(prop.device?.gotsrc)}- 精度： {prop.device?.accuracy}
            </li>
            <li>
              <span>设备状态：</span>
              {prop.device?.attribute.motion ? '运动' : '静止'}- {prop.device?.subTitle}
            </li>
            <li>
              <span>位置：</span>
              {prop.device?.address}
            </li>
            <li>
              <span>定位时间：</span>
              {prop.device?.positionUpdateTime}
            </li>
            <li>
              <span>更新时间：</span>
              {prop.device?.signalUpdateTime}
            </li>
            {prop.device.attribute?.batteryLevel ? (
              <li>
                <span>电池电量：</span>
                {prop.device?.attribute.batteryLevel + '% ' + (prop.device?.attribute.charge ? '充电中' : '')}
              </li>
            ) : null}
          </ul>
          <ElDivider style="margin: 5px 0" />
          <div class={Style.control}>
            <ElButton size="small" onClick={jumpTrack}>
              轨迹
            </ElButton>
            <ElButton size="small" onClick={openTracking}>
              追踪
            </ElButton>
            {prop.device?.alarms && prop.device?.alarms.length > 0 ? (
              <ElButton size="small" onClick={openWarning}>
                报警
              </ElButton>
            ) : null}
            <ElButton size="small" onClick={openCommand}>
              指令
            </ElButton>
            {prop.device?.jt1078Avch > 0 ? (
              <ElButton size="small" onClick={jumpRecordPage}>
                回放
              </ElButton>
            ) : null}
            {prop.device.attribute?.waybillId ? (
              <ElButton size="small" onClick={openDetail}>
                详情
              </ElButton>
            ) : null}
          </div>
        </div>
      </div>
    )
  }
})
